<template>
  <div>
    <el-table ref="multipleTable" v-loading="loading" tooltip-effect="darkTable" :data="fundInvestorList" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" />
      <el-table-column :label="$t('出资人')" align="center" prop="lpName" :show-overflow-tooltip="true" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.lpName }}&nbsp;
            <span v-if="scope.row.partnerType === 'LP'" style="color: #d2322d; font-weight: bold">{{ scope.row.partnerType }}</span>
            <span v-else style="color: #00B83F; font-weight: bold">{{ scope.row.partnerType }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('认缴时间')" align="center" prop="timeSubscription" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.timeSubscription) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('认缴金额') + $t('金额单位')" align="center" prop="subscribedAmount" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.subscribedAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('认缴比例(%)')" align="center" prop="subRatio" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.subRatio * 100) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button type="primary" @click="submitForm">{{ $t("保存") }}</el-button>
    </div>

  </div>
</template>

<script>
import { listFundInvestor } from '@/api/fund/investor/fundInvestor'
export default {
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 出资人信息表格数据
      fundInvestorList: [],
      chooseData: [],
      // 查询参数
      queryParams: {
        userName: undefined,
        subscribedAmount: undefined,
        pageNum: 1,
        pageSize: 10
      },
      selectList: []
    }
  },
  mounted() {
  },
  methods: {
    getList() {
      this.loading = true
      this.queryParams.fundId = this.$route.query.id
      listFundInvestor(this.queryParams).then(response => {
        if (response.code === 200 && response.rows.length > 0) {
          this.fundInvestorList = []
          response.rows.forEach(v => {
              const item = {
                id: undefined,
                investorId: v.id,
                lpName: v.userName,
                subscribedAmount: v.subscribedAmount,
                timeSubscription: v.timeSubscription,
                partnerType: v.partnerType,
                subRatio: v.subscriptionRatio
              }
            this.fundInvestorList.push(item)
          })
          this.total = response.total

          if (this.fundInvestorList.length > 0 && this.selectList.length > 0) {
            this.selectList.forEach(row => {
              this.fundInvestorList.forEach((item) => {
                if (row.investorId === item.investorId) {
                  // console.log(item)
                  this.$nextTick(() => {
                    this.$refs.multipleTable.toggleRowSelection(item, true)
                  })
                }
              })
            })
          }
        }
        this.loading = false
      })
    },
    // 初始化数据
    load(data) {
      this.selectList = data
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    handleSelectionChange(val) {
      this.chooseData = val
    },
    cancel() {
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
    },
    submitForm() {
      this.$emit('getParam', this.chooseData)
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
    }
  }
}
</script>
